<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>用户列表</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/userList1.css">
</head>

<body>
    <div id="app" v-cloak>
        <div class="loading" v-if="mask">
            <img src="../img/load.gif">
        </div>
        <div class="conBox">
            <div class="backBox" @click="onClickLeft">
                <van-icon name="arrow-left" />
            </div>
            <img src="./img/kehu.png" class="kefuTitle" alt="">
            <div class="tableBox">
                <div class="innerBox">
                    <div class="tabBox">
                        <div :class="activeTab==index?'activeTab':''" @click="selectTab(index)"
                            v-for="(item,index) in table" :key="index">
                            {{item.title}}<span>({{item.list.length}}人)</span></div>
                    </div>
                    <div class="listBox">
                        <tamplate v-if="userList.length!=0">
                            <div class="tabTop top1">
                                <span></span>
                                <span>编号</span>
                                <span>客户姓名</span>
                                <span>{{activeTab!=2?'电话':'抽奖时间'}}</span>
                                <span>{{activeTab!=2?'抽奖资格':'奖项'}}</span>
                                <!-- <span>{{activeTab!=2?'电话':'奖项'}}</span>
                                <span>{{activeTab!=2?'抽奖资格':'领取状态'}}</span> -->
                            </div>
                            <div class="tabTop tabMain" v-for="(ele,eIndex) in userList" :key="eIndex">
                                <span>
                                    <!-- v-if="activeTab==0||(activeTab==2&&ele.drawawardType!=1) " -->
                                    <div class="checkBox" @click="ele.isCheck=!ele.isCheck" v-if="activeTab==0">
                                        <van-icon name="success" v-if="ele.isCheck" />
                                    </div>
                                    <div class="noCheckBox" v-if="activeTab==1|| (activeTab==2&&ele.drawawardType==1)">
                                    </div>
                                </span>
                                <span>{{eIndex+1}}</span>
                                <span>{{ele.userName}}</span>
                                <span>{{ activeTab==2?ele.awardTime: ele.userPhone}}</span>
                                <!-- <span>{{ activeTab==2?ele.awardName:'' ele.userPhone}}</span> -->
                                <span>
                                    <template v-if="activeTab!=2">
                                        {{ele.chanceType==1?'有':'无'}}
                                    </template>
                                    <template v-else>
                                        {{ele.awardName}}
                                        <!-- {{ele.drawawardType==1?'已领取':'未领取'}} -->
                                    </template>
                                </span>
                            </div>
                        </tamplate>
                        <div class="emptyBox" v-else>
                            <img src="./img/empty.png" alt="">
                        </div>
                    </div>
                    <!-- v-if="activeTab!=1 && userList.length!=0" -->
                    <div class="submitBox" @click="submitHandle" v-if="activeTab==0">确认提交</div>
                </div>
            </div>
        </div>
    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/city.data-3.js"></script>
    <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        var code = GetQueryString("code");
        var state = GetQueryString("state");

        // alert(code)
        // alert(state)


        var vm = new Vue({
            el: "#app",
            data: {
                table: [
                    {
                        title: '未审核',
                        num: 0,
                        list: []
                    },
                    {
                        title: '已审核',
                        num: 0,
                        list: []
                    },
                    {
                        title: '已中奖',
                        num: 0,
                        list: []
                    },
                ],

                activeTab: '0', // 0 未审核  1 已审核  2 已中奖
                userList: [],// 客户列表
                mask: false,
                signinUserId: localStorage.signinUserId,
                // url: 'http://192.168.0.107:2030/',
                url: 'https://www.ccclkj.cn:2030/',
                ids: '',// 选中的客户id
            },
            created() {
                this.getSalesmanList()
            },
            methods: {
                selectTab(index) {
                    this.activeTab = index
                    this.userList = this.table[index].list
                },

                onClickLeft() {
                    window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe50be6288d63a04c&redirect_uri=https://www.ccclkj.cn/sharepage/51Active/index.html&response_type=code&scope=snsapi_base&state=2#wechat_redirect")
                },

                submitHandle() {
                    this.ids = ''
                    this.userList.forEach(item => {
                        if (item.isCheck) {
                            this.ids += item.signinId + ','
                        }
                    });
                    console.log(this.ids);

                    if (this.ids == '') {
                        this.$toast('请选择客户')
                        return
                    }
                    var that = this;
                    this.$dialog.confirm({
                        title: '提示',
                        message: '是否仔细核对客户信息？',
                    })
                        .then(function () {
                            console.log(that.ids);

                            var data = {
                                ids: that.ids,
                            };
                            if (that.activeTab == 0) {
                                data.chanceType = 1
                                data.drawawardType = ''
                            } else if (that.activeTab == 2) {
                                data.chanceType = 1
                                data.drawawardType = 1
                            }
                            console.log(data);

                            // return

                            that.mask = true;
                            ajax({
                                url: newUrl4 + "meeting/editSigninList",
                                type: 'post',
                                data: data,
                                dataType: 'json',
                                timeout: 10000,
                                contentType: "application/json",
                                success: function (res) {
                                    console.log(res);
                                    var res = JSON.parse(res)
                                    if (res.flag) {
                                        console.log(res);
                                        if (that.activeTab == 0) {
                                            that.activeTab = 1
                                        }
                                        that.$toast('提交成功')
                                        that.getSalesmanList()
                                    }
                                    that.mask = false
                                },
                            })

                        })
                        .catch(function () {
                            // on cancel
                        });
                },
                // 获取业务员列表
                getSalesmanList() {
                    var _this = this;
                    _this.mask = true;
                    ajax({
                        url: newUrl4+ "meeting/getSigninList",
                        type: 'post',
                        data: {
                            salesman: _this.signinUserId,
                            flag: 0 // 0 业务员获取信息   1 随机获取首页用户
                            // salesman: 10
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            console.log(res);
                            var res = JSON.parse(res)
                            if (res.flag) {
                                console.log(res);
                                _this.table[0].list = []
                                _this.table[1].list = []
                                _this.table[2].list = []
                                _this.userList = []
                                res.data.forEach(item => {
                                    item.isCheck = false;
                                    if (item.chanceType == 1) { //  有资格
                                        if (item.awardType == 1) {  // awardType==1  已中奖
                                            _this.table[2].list.push(item)
                                        } else {
                                            _this.table[1].list.push(item)
                                        }
                                    } else {  // 没有资格
                                        _this.table[0].list.push(item)
                                    }
                                });

                                _this.userList = _this.table[_this.activeTab].list
                                console.log(_this.table);
                            }
                            _this.mask = false
                        },
                    })
                },
            }
        })

    </script>

</body>

</html>